import React, {useEffect, useRef} from 'react';
import ProThreeJs3D, { ProThreeJs3DRef } from "vendor/components/pro-threeJs3D";
import { getEnv } from "@/constants";

const ThreeJs3D: React.FC = () => {
    const proThreeJs3DRef = useRef<ProThreeJs3DRef>();
    const gltfDecoderPath = getEnv().staticPublicPath.replace(/\/$/, "") + "/three/draco/gltf/";

    useEffect(() => {
        const threeUtil = proThreeJs3DRef.current.getThreeUtil();
        const { modelLoader } = threeUtil;
        modelLoader.loadGltf("/asserts/3d/gltf/device/234-processed.glb", (gltf) => {
            const model = gltf.scene;
            model.position.set(0, -2, 0);
            model.scale.set(0.2, 0.2, 0.2);
            return gltf;
        })

        modelLoader.loadGltf("/asserts/3d/gltf/radar/34M_17.gltf", (gltf) => {
            const model = gltf.scene;
            model.position.set(0, -2, 0);
            model.scale.set(0.2, 0.2, 0.2);
            return gltf;
        })
    }, []);

    return <ProThreeJs3D
        ref={proThreeJs3DRef}
        opts={{
            gltfDecoderPath,
            axesHelperParams: {
                visible: true,
            },
            gridHelperParams: {
                visible: true,
            }
        }}
    />
}

export default ThreeJs3D;